import { ConfigProvider as SemiConfigProvider } from "@douyinfe/semi-ui";
import { ConfigProvider, Modal, Drawer } from "antd";
import { useModel, Outlet } from "umi";
import dayjs from "dayjs";
import zhCN from "antd/es/locale/zh_CN";
import zh_CN from "@douyinfe/semi-ui/lib/es/locale/source/zh_CN";
import "dayjs/locale/zh-cn";

import MainPageLayout from "./main";

dayjs.locale("zh-cn");

const myTheme = {
    components: {
        Segmented: {},
    },
};

const MainLayout = () => {
    const { modalVisible, modalTitle, modalWidth, modalComponent, modalStyle, onCloseGlobalModal } = useModel("global.modal");
    const { drawerVisible, drawerTitle, drawerWidth, drawerHeight, drawerComponent, drawerPlacement, drawerFooter } = useModel("global.drawer");
    const { onCloseGlobaldrawer, drawerMask, drawerMaskClosable, drawerClosable, drawerContainer } = useModel("global.drawer");

    let LayoutComponent = MainPageLayout;

    return (
        <ConfigProvider locale={zhCN} theme={myTheme}>
            <SemiConfigProvider locale={zh_CN}>
                <LayoutComponent>
                    <Outlet />
                </LayoutComponent>
                <Drawer
                    title={drawerTitle}
                    placement={drawerPlacement}
                    height={drawerHeight}
                    width={drawerWidth}
                    closable={drawerClosable}
                    destroyOnClose={true}
                    onClose={onCloseGlobaldrawer}
                    open={drawerVisible}
                    getContainer={drawerContainer}
                    mask={drawerMask}
                    maskClosable={drawerMaskClosable}
                    rootStyle={{ position: "absolute" }}
                    footer={drawerFooter}
                >
                    {drawerComponent || ""}
                </Drawer>
                <Modal
                    title={modalTitle}
                    closable={modalTitle !== null}
                    destroyOnClose={true}
                    centered={!modalStyle}
                    style={modalStyle}
                    maskClosable={false}
                    footer={null}
                    open={modalVisible}
                    width={modalWidth}
                    okText="确认"
                    cancelText="取消"
                    onCancel={onCloseGlobalModal}
                >
                    {modalComponent || ""}
                </Modal>
            </SemiConfigProvider>
        </ConfigProvider>
    );
};

export default MainLayout;
